import React, { Component } from "react";

class Field extends Component {
  state = {
    val: "",
  };
  handleClick() {
    this.setState({
      val: "",
    });
  }
  render() {
    return (
      <div>
        <input
          type={this.props.type}
          value={this.state.val}
          onChange={(e) => {
            this.setState({
              val: e.target.value,
            });
          }}
        />
      </div>
    );
  }
}

export default class App extends Component {
  textRef = React.createRef();
  password = React.createRef();
  onClick() {
    console.log(this.textRef.current.state.val);
  }
  render() {
    return (
      <div>
        <Field type="text" ref={this.textRef} />
        <Field type="password" ref={this.password} />
        <button
          onClick={() => {
            this.onClick();
          }}
        >
          点击
        </button>
        <button
          onClick={() => {
            this.textRef.current.handleClick();
          }}
        >
          取消
        </button>
      </div>
    );
  }
}
